<template>
  <div class="page-operation">
    <el-button type="primary" @click="handleInsertAttr">Insert Attr</el-button>

    <el-popconfirm
      title="It cannot be restored after deletion. Are you sure you want to delete it ?"
      @confirm="handleDelAttrBatch"
    >
      <template #reference>
        <el-button type="danger" :disabled="!ids">Delete Attr</el-button>
      </template>
    </el-popconfirm>
  </div>
  <div class="page-filter">
    <el-form inline @submit.prevent="handleGetProductAttrList(Params)">
      <el-form-item label="Name">
        <el-input v-model="Params.rule_name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">Search</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="page-container" v-loading="isLoadingAttrList">
    <el-table border :data="productAttrList" @selection-change="handleSelsetAttr">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="rule_name" label="Name"></el-table-column>
      <el-table-column prop="attr_name" label="Keys"></el-table-column>
      <el-table-column prop="attr_value" label="Value"></el-table-column>

      <el-table-column label="Action" fixed="right" width="120">
        <template #default="{ row }">
          <el-link type="primary" @click="handleEditAttr(row)">Edit</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm
            title="It cannot be restored after deletion. Are you sure you want to delete it ?"
            @confirm="handleDelAttr(row)"
          >
            <template #reference>
              <el-link type="danger">Delete</el-link>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      v-model:size="Params.limit"
      v-model:index="Params.page"
      :total="productAttrCount"
      :on-change="() => handleGetProductAttrList(Params)"
    ></Pagination>

    <EditAttr v-model="editVisible" :id="id" @submit="handleGetProductAttrList" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

import useProducrAttr from './index'
import Pagination from '@/components/pagination/index.vue'
const { handleGetProductAttrList, productAttrList, productAttrCount, isLoadingAttrList } = useProducrAttr()

import EditAttr from './edit.vue'
import { delProductAttr } from '@/api/product'

const Params = ref({
  rule_name: '',
  limit: 10,
  page: 1
})

handleGetProductAttrList(Params)

const editVisible = ref(false)

const id = ref<number>(0)

function handleInsertAttr() {
  id.value = 0
  editVisible.value = true
}

function handleEditAttr(row: ProductAttrType) {
  id.value = row.id
  editVisible.value = true
}

function handleDelAttr(row: ProductAttrType) {
  delProductAttr({ ids: row.id + '' }).then(() => {
    handleGetProductAttrList(Params)
  })
}

const ids = ref<string>('')

function handleSelsetAttr(selection: ProductAttrType[]) {
  console.log(selection)
  ids.value = selection.map(item => item.id).join(',')
}

function handleDelAttrBatch() {
  delProductAttr({ ids: ids.value }).then(() => {
    handleGetProductAttrList(Params)
  })
}
</script>